<template>
    <div class="withdraw-page">
        <van-image class="withdraw-page-bg" :src="require('../../assets/image/els/order-bg.png')"></van-image>
        <div class="content">
            <div class="box">
                <div class="hint">
                    <p class="title">{{ $i18n.t('default.my.withdrawBtn')}}</p>
                    <!-- <p class="desc">每日累计提现金额上限10000元</p> -->
                </div>
                <div class="cell-box van-hairline--bottom">
                    <div class="cell " >
                            <van-field
                                v-model="form.amount"
                                class="input"
                                name="用户姓名"
                                label="$"
                                type="number"
                                @input="inputChange"
                                :placeholder="amountValue"
                                :rules="[{ required: true, message: '' }]" />
                            <p class="icon" @click="getAllWithdraw">{{$i18n.t('default.my.withdrawAll')}}</p>
                    </div>
                </div>
                <div class="hint2">{{$i18n.t('default.my.withdrawSuccessTip')}}：{{form.amount}}</div>
                <div class="btns">
                    <van-button size="large" class="btn home-button" @click="getWithdraw">{{$i18n.t('default.my.withdraw')}}</van-button>
                    <div class="withdraw-list" @click="gotoPage('/member/withdrawList')">
                        <p class="title">{{$i18n.t('default.my.withdrawRecord')}}</p>
                        <van-icon class="icon" name="arrow" />
                    </div>
                </div>
            </div>

            <div class="hint3">
                <!-- <p>1.提现手续费6%</p> -->
                <p>1.{{ $i18n.t('default.my.withdrawTip')}}</p>
            </div>
           
        </div>
    </div>
</template>

<script>
    export default {
        name: 'withdraw',
        data () {
            return {
                form:{
                    amount:''
                },
                onlyAmount: 0, //手续费计算值
                amountValue: '',
            }
        },
        created(){
            
            this.amountValue = this.$i18n.t('default.my.withdrawAmount') + this.$store.state.userInfo.userBalance;
            if(this.$store.state.userInfo.userBalance ==undefined){
                this.init();
            }
        },
        mounted() {
     
        },
        methods: {
            init(){
                this.$api.get(this.$url.user.info).then(res=>{
                    console.log('my...res:',res)
                    if(res.code == 'SUCCESS'){
                        this.userForm = res.data;
                        this.$store.commit('setUserInfo',res.data);
                    }else{
                        
                    }
                })
            },
            gotoPage(value){
                this.$router.push({path:value});
            },
            getAllWithdraw(){
                this.form.amount = this.$store.state.userInfo.userBalance;
                if(this.form.amount !=0 && this.form.amount != ''){

                }
            },
            inputChange(value){
                if(value > this.$store.state.userInfo.userBalance){
                    this.form.amount = this.$store.state.userInfo.userBalance;
                }
                if(this.form.amount>0){
                    this.onlyAmount = (this.form.amount - this.form.amount * 0.06).toFixed(2);  
                }
            },
            getWithdraw(){
                if(this.form.amount != '' && this.form.amount != 0){
                    if(this.form.amount > this.$store.state.userInfo.userBalance || this.form.amount > 10000){
                        this.$toast(this.$i18n.t('default.my.withdrawAmountTip2'));
                        return;
                    }
                    this.$api.post(this.$url.withdrawal.withdrawal,{
                        wMoney:this.form.amount
                    }).then(res=>{
                        if(res.code == 'SUCCESS'){
                            this.$toast(this.$i18n.t('default.my.withdrawSuccess'));
                            this.form.amount = '';
                            let that = this;
                            setTimeout(()=>{
                                that.init();
                            },1000)
                        }
                    })

                } else {
                    this.$toast(this.$i18n.t('default.my.withdrawAmountTip'));
                    return;
                }
                // /withdrawal/actually
                this.$toast(this.$i18n.t('default.my.withdrawFailTip'));
            }
        }
    }
</script>

<style scoped lang="scss">
.withdraw-page{
    // background: url('../../assets/image/els/order-bg.png') no-repeat;
    min-height: 100vh;
    padding:.3rem;
    position: relative;
    .withdraw-page-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .content{
        position: relative;
        z-index: 1;
        .box{
            background: #fff;
            border-radius: .2rem;
            padding:.7rem .3rem .9rem;
            .hint{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title{
                    font-size: .32rem;
                    font-weight: bold;
                    color: #333;
                }
                .desc{
                    font-size: .24rem;
                    color: #999;
                }
            }
            .cell-box{
                padding-top: .5rem;
                .cell{
                    padding: 0 0 .59rem 0;
                    height:.88rem;
                    display: flex;
                    align-items: center;
                    background: #fff;
                    border-radius: .05rem;;
                    // border-bottom: 1px solid #755936;
                    justify-content: space-between;
                    color: #755936;
                    ::after{
                        border-bottom: none;
                    }
                    .input{
                        width: 70%;
                        padding: 0;
                        align-items: center;
                    }
                    .icon{
                        font-size: .3rem;
                        color: #755936;
                        // border: 1px solid #E5E5E5;
                        border-radius: .05rem;
                    }
                    .input{
                        width: 70%;
                        padding: 0;
                        align-items: center;
                    }
                    .icon{
                        font-size: .26rem;
                        color: #755936;
                        // border: 1px solid #E5E5E5;
                        border-radius: .05rem;
                        // padding: .1rem .2rem;
                    }
                }
            }
        }
    }
    .hint2{
        font-weight: 400;
        font-size: 0.28rem;
        color: #939393;
        margin-top: .2rem;
    }
    .hint3{
        p{
            font-size: .28rem;
            color: #43331E;
            margin-top: .3rem;
        }
    }
    .btns{
        margin-top: .7rem;
        .btn{
            border-radius: .5rem;
        }
        .withdraw-list{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: .3rem;
            .title{
                font-size: .32rem;
                color: #755936;
            }
            .icon{
                font-size: .3rem;
                color: #755936;
                height: .24rem;
            }
        }
    }

}
</style>

<style>
.withdraw-page .content .box .van-field__label{
    font-size: .6rem;
    color: #755936;
    margin-right: .1rem;
    width: auto;
    padding: .1rem;
    
}
.withdraw-page .content .box .van-field__label span{
    padding-right: .1rem;
    border-right: .1rem solid #F2CB51;
}
</style>